<template>
  <div class="chart-detail">
    <div class="" style="height:70px;" v-show="canShow"></div>
    <!-- 头部显示 -->
    <div class="detail-top detail-top-layout" :class="leftAnimate" :style="{width: navWidth + 'px', top: top + 'px'}">
      <div class="top-left">
        单病种就诊人员分布情况
      </div>
      <div class="top-right" @click="goBack">
        返回
      </div>
    </div>
    <!-- 详情 -->
    <div class="detail-box detail-box-layout" :style="{height: height + 'px', top: top - 26 + 'px'}">
      <!-- 详情头部 -->
      <div class="chart-title-layout second-search">
        <!-- 头部左侧显示 -->
        <h3 class="chart-title">
          <div class="area-title-name" @mouseenter="mouseenter()"
               @mouseleave="mouseleave()">{{ areaTitle }} &nbsp; | &nbsp; {{this.hospNameTitle }} &nbsp; | &nbsp;
            {{this.propParams.medicalType}} &nbsp; | &nbsp; {{this.propParams.year}}年 &nbsp; | &nbsp;
            {{this.diseaseNameTitle}}
          </div>
        </h3>
        <!-- 头部右侧筛选 -->
        <div class="search-right">
          <div class="secondSearchBtn" @click="showSecondSearch">
            <svg class="searchSvg" style="float:left;" viewBox="0 0 1024 1024">
              <path :d="svgPath.searchBtn"></path>
            </svg>
            <div style="float:left;margin-left:10px;">
              <span class="search-tip" v-show="isAll==0">按条件筛选</span>
              <div class="search-choose-container" v-show="isAll>0">
                <span>{{ageText}}</span> |
                <span>{{yearText}}</span> |
                <span>{{unitText}}</span> |
                <span>{{sexText}}</span> |
              </div>
            </div>
          </div>
          <svg class="searchBtn searchSvg resetBtn" @click="checkedReset" viewBox="0 0 1024 1024">
            <path :d="svgPath.resetBtn1"></path>
            <path :d="svgPath.resetBtn2"></path>
          </svg>
        </div>
        <!-- 头部左侧显示浮窗  -->
        <div class="chart-title-floating" v-show="showFloating">
          <span>统筹区: {{ this.propParams.areaName }}</span><br>
          <span>医院: {{ this.propParams.hospName }}</span><br>
          <span>医疗类型: {{ this.propParams.medicalType }}</span><br>
          <span>年份: {{ this.propParams.year }}</span><br>
          <span>疾病名称: {{ this.propParams.disName }}</span>
        </div>
      </div>
      <!-- 详情内容 -->
      <div :class="this.isShowChart ? '' : 'chart-content-wrapper'"
           style="height: 100%; overflow: auto; padding-top: 64px">
        <div class="small-content" v-show="isShowChart">
          <!--头部-->
          <div class="content-head content-head-small-height" v-show="isShowChart">
            <div class="distribution-insured-persons-wrapper">
              <ul>
                <li class="left-card">
                  <div class="content-left">
                    <img src="../../../assets/img/chart-svg/allInsuredPersonnel.svg" alt="" class="card-icon">
                    <span class="card-title">全部就诊人员</span>
                  </div>
                  <div class="content-right">
                    <span class="card-subTitle">就诊人员/占比</span>
                    <p>
                      <span class="card-number">{{this.bulkMap.numArray && this.bulkMap.numArray[0]}}</span>
                      <span class="card-numberUnit-numberRatio">
                      {{ this.bulkMap.measureArray && this.bulkMap.measureArray[0]}}
                      /{{this.bulkMap.rateArray && this.bulkMap.rateArray[0]}}%
                    </span>
                    </p>
                  </div>
                </li>
                <li class="middle-card">
                  <div class="content-left">
                    <img src="../../../assets/img/chart-svg/manInsuredPersonnel.svg" alt="" class="card-icon">
                    <span class="card-title">男性就诊人员</span>
                  </div>
                  <div class="content-right">
                    <span class="card-subTitle">就诊人员/占比</span>
                    <p>
                      <span class="card-number">{{this.bulkMap.numArray && this.bulkMap.numArray[1]}}</span>
                      <span class="card-numberUnit-numberRatio">
                      {{ this.bulkMap.measureArray && this.bulkMap.measureArray[1]}}
                      /{{this.bulkMap.rateArray && this.bulkMap.rateArray[1]}}%
                    </span>
                    </p>
                  </div>
                </li>
                <li class="right-card">
                  <div class="content-left">
                    <img src="../../../assets/img/chart-svg/wommanInsuredPersonnel.svg" alt="" class="card-icon">
                    <span class="card-title">女性就诊人员</span>
                  </div>
                  <div class="content-right">
                    <span class="card-subTitle">就诊人员/占比</span>
                    <p>
                      <span class="card-number">{{this.bulkMap.numArray && this.bulkMap.numArray[2]}}</span>
                      <span class="card-numberUnit-numberRatio">
                      {{ this.bulkMap.measureArray && this.bulkMap.measureArray[2]}}
                      /{{this.bulkMap.rateArray && this.bulkMap.rateArray[2]}}%
                    </span>
                    </p>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!--四个chart-->
          <div class="content-four-chart content-four-chart-max-height">
            <div class="content-four-chart-top bottom-line">
              <div class="content-four-chart-left">
                <div class="chart-container" v-show="isShowChart">
                  <div class="four-chart-mini-title">
                    <span>年龄分布</span>
                    <span class="title-bk-container"></span>
                  </div>
                  <div id="three-area-chart-id" class="chart-type1 chart-type1-layout"></div>
                </div>
              </div>
              <div class="content-four-chart-right">
                <div class="chart-container" v-show="isShowChart">
                  <div class="four-chart-mini-title">
                    <span>就诊时间分布</span>
                    <span class="title-bk-container"></span>
                  </div>
                  <div class="chart-radio">
                    <ul>
                      <li>
                        <el-radio v-model="radioVal" label="1">按月统计</el-radio>
                      </li>
                      <li>
                        <el-radio v-model="radioVal" label="2">按天统计</el-radio>
                      </li>
                    </ul>
                  </div>
                  <div id="one-area-chart-id" class="chart-type1 chart-type1-layout"></div>
                </div>
              </div>
            </div>
            <div class="content-four-chart-bottom bottom-line">
              <div class="content-four-chart-left">
                <div class="chart-container" v-show="isShowChart">
                  <div class="four-chart-mini-title">
                    <span>单位类型</span>
                    <span class="title-bk-container"></span>
                  </div>
                  <div id="bar-chart-id" class="chart-type1"></div>
                </div>
              </div>
              <div class="content-four-chart-right">
                <div class="chart-container" v-show="isShowChart">
                  <div class="four-chart-mini-title">
                    <span>性别比例</span>
                    <span class="title-bk-container"></span>
                  </div>
                  <div id="pie-chart-id" class="chart-type1"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 筛选 -->
    <div class="second-search-box" v-show="showSearchBox">
      <div class="min-second-search-content">
        <div class="second-title">
          <div class="title-name">
            <span>请选择人员统计维度</span>
          </div>
          <div class="second-btn-box">
            <span class="dap-button" style="margin-right:10px;" @click="saveMessage">确定</span>
            <span class="dap-close-button" @click="hideBox">取消</span>
          </div>
        </div>
        <div class="second-main">
          <div class="second-item">
            <h3 class="second-item-name">
              <span class="left-circle-wrapper"></span>
              年龄段
            </h3>
            <ul class="second-contain">
              <form  autocomplete="off">
                <input class="second-contain-input" type="number" maxlength="3" placeholder="不限" v-model="startAge">
                <span class="second-contain-input-span">~</span>
                <input class="second-contain-input" type="number" maxlength="3" placeholder="不限" v-model="endAge">
                <span class="second-contain-input-span">岁</span>
              </form>
            </ul>
            <div class="second-item-remind">备注：年龄支持输入0-120岁的整数。</div>
          </div>

          <!-- 月 -->
          <div class="second-item" v-show="radioVal == 1">
            <h3 class="second-item-name">
              <span class="left-circle-wrapper"></span>
              就诊时间段
            </h3>
            <ul class="second-contain">
              <el-date-picker
                v-model="startMonthDate"

                id="monthPicker1"
                format="yyyy年MM月"
                type="month"
                placeholder="不限"
                size="mini"
                :default-value="this.propParams.year"
                :picker-options="limitedYearPickerOptions">
              </el-date-picker>
              <span class="second-contain-input-span">~</span>
              <el-date-picker
                v-model="endMonthDate"
                id="monthPicker2"
                format="yyyy年MM月"
                type="month"
                placeholder="不限"
                size="mini"
                :default-value="this.propParams.year"
                :picker-options="limitedYearPickerOptions">
              </el-date-picker>
            </ul>
            <!--<div class="second-item-remind">备注：年龄支持输入0-120岁的整数。</div>-->
          </div>

          <!-- 天 -->
          <div class="second-item" v-show="radioVal == 2">
            <h3 class="second-item-name">
              <span class="left-circle-wrapper"></span>
              就诊时间段
            </h3>
            <ul class="second-contain">
              <el-date-picker
                v-model="startDate"
                id="datePicker1"
                format="yyyy年MM月dd日"
                type="date"
                placeholder="不限"
                size="mini"
                :default-value="this.propParams.year"
                :picker-options="limitedYearPickerOptions">
              </el-date-picker>
              <span class="second-contain-input-span">~</span>
              <el-date-picker
                v-model="endDate"
                id="datePicker2"
                format="yyyy年MM月dd日"
                type="date"
                placeholder="不限"
                size="mini"
                :default-value="this.propParams.year"
                :picker-options="limitedYearPickerOptions">
              </el-date-picker>
            </ul>
            <!--<div class="second-item-remind">备注：年龄支持输入0-120岁的整数。</div>-->
          </div>

          <!-- 单位类型 -->
          <div class="second-item">
            <h3 class="second-item-name">
              <span class="left-circle-wrapper"></span>
              单位类型
            </h3>
            <ul class="second-contain">
              <li v-for="(item,index) in this.screenObj.compType" @click="chooseUnit(index,item)"
                  :class="unitIndex==index ? 'activeLi' : ''">
                {{item.selectName}}
              </li>
            </ul>
            <div class="second-item-remind">备注：其它为除上述单位类型外的其它人员</div>
          </div>
          <!-- 性别 -->
          <div class="second-item">
            <h3 class="second-item-name">
              <span class="left-circle-wrapper"></span>
              性别
            </h3>
            <ul class="second-contain">
              <li v-for="(item, index) in this.screenObj.sex" @click="chooseSex(index,item)"
                  :class="sexIndex==index ? 'activeLi' : ''">
                {{item.selectName}}
              </li>
            </ul>
            <div class="second-item-remind">备注：未知为身份证号码格式错误等数据异常原因，无法计算性别的人群</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import '../../../assets/css/chartDetail.css'
  import {loadingOpt, svgPath} from '../../../assets/js/utils.js'

  import {getSearchItems, getQuerySingleJiuZhenDetail,} from '../../../api/api'

  import job from '../../../assets/img/chart-svg/job.svg'
  import career from '../../../assets/img/chart-svg/career.svg'
  import company from '../../../assets/img/chart-svg/company.svg'
  import other from '../../../assets/img/chart-svg/other.svg'

  export default {
    props: {
      'isChange': {
        type: Number
      },
      'isCollapse': {
        type: Boolean,
        default: null
      }
    },
    data () {
      let that = this;
      return {
        areaTitle: '',  // 用于显示统筹区隐藏字段
        hospNameTitle: '', // 用于显示医院名称隐藏字段
        diseaseNameTitle: '', // 用于显示医院名称隐藏字段
        height: 800,  // 初始化高度
        canShow: true,
        showFloating: false, // 是否loding
        filter: null, // 筛选条件

        propParams: {}, // 传递过来的参数
        year: '',       //  年
        startAge: '',   // 起始年龄
        endAge: '',     // 结束年龄
        compType: '',   // 单位类型
        sex: '',        // 性别

        leftAnimate: '', // 左侧切换
        navWidth: '800', // 导航宽度
        top: '70', // 标题高度

        isShowChart: true, // 是否显示图表
        isShowOneAreaChart: true,

        // 图表
        bulkMap: [], // 头部显示标题
        job, // svg
        career, // svg
        company, // svg
        other, // svg
        defaultUnit: {'企业': 'company', '事业单位': 'career', '灵活就业': 'job', '其它': 'other'}, // 默认的单位类型

        // 筛选
        svgPath,
        showSearchBox: false,
        screenObj: {},

        // 显示文案
        ageText: '全部年龄',
        yearText: '全部月份',
        unitText: '全部单位类型',
        sexText: '全部性别',

        // 选择了第几个
        unitIndex: 0, // 单位
        sexIndex: 0, // 性别

        oldObj: {}, // 保存旧值

        // 日历
        radioVal: '1',
        startDate: null,
        endDate: null,
        startMonthDate: null,
        endMonthDate: null,
        limitedYearPickerOptions: {
          disabledDate (time) {
            let year = new Date(that.propParams.year);
            return time.getFullYear() > year.getFullYear() || time.getFullYear() < year.getFullYear();
          }
        }
      }
    },
    mounted () {

      this.getContentH();
      this.initMyChart();
      this.initScreenObj();

      this.initData();
    },
    watch: {
      isChange () {
        setTimeout(() => {
          this.getContentH();
          setTimeout(() => {
            this.resizeMyChart();
          }, 1)
        }, 211)
      },
      isCollapse (val) {
        this.getContentH();
      },
      startAge (newVal, oldVal) {
        let numNewVal = Number(newVal);
        if (numNewVal && (numNewVal < 0 || numNewVal > 120)) {
          this.startAge = oldVal;
        }
      },
      endAge (newVal, oldVal) {
        let numNewVal = Number(newVal);
        if (numNewVal && (numNewVal < 0 || numNewVal > 120)) {
          this.endAge = oldVal;
        }
      },
      showSearchBox (val) {
        let zIndex = val ? 200 : 10000002;
        document.querySelector('.el-header').style.zIndex = zIndex;
      },
      radioVal (newVal, oldVal) {
        //  发送单个图 的网络请求
        if (newVal == 1) {

          this.startDate =
            this.endDate = null;

          if (!this.startMonthDate && !this.endMonthDate) {
            this.yearText = '全部月份';
          } else {
            this.getMonthText();
          }
        } else if (newVal == 2) {

          this.startMonthDate =
            this.endMonthDate = null;

          if (!this.startDate && !this.endDate) {
            this.yearText = '全部天数';
          } else {
            this.getTimeText();
          }
        }

        this.getData();
      }
    },
    computed: {
      isAll () {
        let temp = false;
        if (this.radioVal == 1) {
          temp = this.startMonthDate || this.endMonthDate;
        } else if (this.radioVal == 2) {
          temp = this.startDate || this.endDate;
        }
        return this.startAge.length + this.endAge.length + Number(temp) + this.unitIndex + this.sexIndex;
      }
    },
    methods: {
      // 选择单位类型
      chooseUnit (index, item) {
        this.unitIndex = index;
        this.compType = item.selectId;
        this.unitText = item.selectName
      },
      // 选择性别
      chooseSex (index, item) {
        this.sexIndex = index;
        this.sex = item.selectId;
        this.sexText = item.selectName
      },
      // 确认按钮
      saveMessage () {

        this.submitCheckInput();
        this.submitCheckTimeInput();

        this.getData();
        this.showSearchBox = false;
      },
      // 提交前时间处理
      submitCheckTimeInput () {
        if (this.radioVal == 1) {
          this.getMonthText();
        } else if (this.radioVal == 2) {
          this.getTimeText();
        }
      },
      getMonthText () {
        if (this.startMonthDate && this.endMonthDate) {
          if (this.startMonthDate.getMonth() > this.endMonthDate.getMonth()) {
            var temp = new Date();
            temp = this.endMonthDate;
            this.endMonthDate = this.startMonthDate;
            this.startMonthDate = temp;
          }
        }

        let tempStart = this.propParams.year + '年' + '01月';
        let tempEnd = this.propParams.year + '年' + '12月';

        this.yearText = (this.startMonthDate ? this.dateFormat(this.startMonthDate, 'yyyy年MM月') : tempStart) + '-' +
          (this.endMonthDate ? this.dateFormat(this.endMonthDate, 'yyyy年MM月') : tempEnd);
      },
      getTimeText () {
        if (this.startDate && this.endDate) {
          if (this.startDate.getMonth() > this.endDate.getMonth()) {
            var temp = new Date();
            temp = this.endDate;
            this.endDate = this.startDate;
            this.startDate = temp;
          }
          if (this.startDate.getDate() > this.endDate.getDate()) {
            var temp = new Date();
            temp = this.endDate;
            this.endDate = this.startDate;
            this.startDate = temp;
          }
        }

        let tempStart = this.propParams.year + '年' + '01月' + '01日';
        let tempEnd = this.propParams.year + '年' + '12月' + '31日';
        this.yearText = (this.startDate ? this.dateFormat(this.startDate, 'yyyy年MM月dd日') : tempStart) + '-' +
          (this.endDate ? this.dateFormat(this.endDate, 'yyyy年MM月dd日') : tempEnd);
      },
      // 提交前处理输入框
      submitCheckInput () {
        if (this.startAge && this.endAge && Number(this.startAge) > Number(this.endAge)) {
          let temp = this.startAge;
          this.startAge = this.endAge;
          this.endAge = temp;
        }

        let start = this.startAge;
        let end = this.endAge;
        if (!start.length && !end.length) {
          this.ageText = '全部年龄';
        } else {
          this.ageText = (start.length ? start : '0') + '-' + (end.length ? end : '120') + '岁';
        }

      },
      // 取消按钮
      hideBox () {
        // 年龄段
        this.startAge = this.oldObj.startAge;
        this.endAge = this.oldObj.endAge;

        // 就诊时间段
        let tempDate = new Date();
        tempDate = this.oldObj.startDate;
        this.startDate = tempDate;

        tempDate = this.oldObj.endDate;
        this.endDate = tempDate;

        tempDate = this.oldObj.startMonthDate;
        this.startMonthDate = tempDate;

        tempDate = this.oldObj.endMonthDate;
        this.endMonthDate = tempDate;

        // 全部单位
        this.unitIndex = this.oldObj.unitIndex;
        this.compType = this.oldObj.compType;

        // 性别
        this.sexIndex = this.oldObj.sexIndex;
        this.sex = this.oldObj.sex;

        this.showSearchBox = false;
      },
      // 重置按钮
      checkedReset () {
        // 年龄段
        this.startAge =
          this.endAge = '';

        // 就诊时间段
        this.startDate =
          this.endDate =
            this.startMonthDate =
              this.endMonthDate = null;

        // 全部单位
        this.unitIndex = 0;
        this.compType = '';

        // 性别
        this.sexIndex = 0;
        this.sex = '';

        this.getData();
      },
      // 筛选按钮点击
      showSecondSearch () {
        this.saveOldObj();
        this.showSearchBox = true;
      },
      // 保存旧值
      saveOldObj () {
        let oldObj = {};
        // 年龄段
        oldObj.startAge = this.startAge;
        oldObj.endAge = this.endAge;

        // 就诊时间段
        let tempDate = new Date();
        tempDate = this.startDate;
        oldObj.startDate = tempDate;

        tempDate = this.endDate;
        oldObj.endDate = tempDate;

        tempDate = this.startMonthDate;
        oldObj.startMonthDate = tempDate;

        tempDate = this.endMonthDate;
        oldObj.endMonthDate = tempDate;

        // 全部单位
        oldObj.unitIndex = this.unitIndex;
        oldObj.compType = this.compType;

        // 性别
        oldObj.sexIndex = this.sexIndex;
        oldObj.sex = this.sex;

        this.oldObj = oldObj;
      },
      // 日期格式化
      dateFormat (date, fmt) { //author: meizz

        var o = {
          "M+": date.getMonth() + 1, //月份
          "d+": date.getDate(), //日
          "h+": date.getHours(), //小时
          "m+": date.getMinutes(), //分
          "s+": date.getSeconds(), //秒
          "q+": Math.floor((date.getMonth() + 3) / 3), //季度
          "S": date.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt)) {
          fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
        }
        for (var k in o) {
          if (new RegExp("(" + k + ")").test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
          }
        }
        return fmt;
      },

      // 初始化数据
      initData () {
        // 初始化数据
        let data = this.$route.query;
        this.propParams = {
          'areaName': data.areaName,
          'areaCode': data.areaCode,
          'hospName': '',
          'hospCode': data.hospCode,
          'year': data.queryYear + '',
          'medicalType': data.medicalType,
          'medicalTypeCode': data.medicalTypeCode,
          'hospLevel': data.hospLevel,

          'disId': data.disId,
          'disName': data.disName,
        };



        this.areaTitle = (this.propParams.areaName ? this.filterLogText(this.propParams.areaName) : '');
        this.diseaseNameTitle = this.propParams.disName ? this.filterLogText(this.propParams.disName) : '';
        this.loadingMyChart(true);

        //获取筛选数据
        getSearchItems('init/initInput')
          .then((res) => {
            if (res.code == 0) {
              this.filter = res.data;

              let hospName = this.getHospName(data);
              this.propParams.hospName = hospName;
              this.hospNameTitle = this.filterLogText(this.propParams.hospName);

              this.getData();
            } else {
              this.isShowChart = false;
            }
          });
      },
      getHospName (data) {
        let mainHospIdArr = data.resultLevel.split(',');
        let subHospIdArr = data.hospCode.split(',');
        var hospName = '';

        //  三级医院
        var tempName = '';
        if (mainHospIdArr.includes('3')) {
          tempName += '三级医院';
        } else {
          if (subHospIdArr.length) {
            tempName += this.getSubHospName(subHospIdArr, this.filter.nc.detailHospital[0].child);
          }
        }

        if (hospName.length && tempName.length) {
          hospName += '、';
        }

        if (tempName.length) {
          hospName += tempName;
        }

        //  二级医院
        tempName = '';
        if (mainHospIdArr.includes('2')) {
          tempName += '二级医院';
        } else {
          tempName += this.getSubHospName(subHospIdArr, this.filter.nc.detailHospital[1].child);
        }
        if (hospName.length && tempName.length) {
          hospName += '、';
        }

        if (tempName.length) {
          hospName += tempName;
        }

        //  一级医院
        tempName = '';
        if (mainHospIdArr.includes('1')) {
          tempName += '一级医院';
        }
        if (hospName.length && tempName.length) {
          hospName += '、';
        }

        if (tempName.length) {
          hospName += tempName;
        }

        return hospName;
      },
      getSubHospName (subHospCodes, filter) {
        var subHospName = [];
        subHospCodes.forEach((item, index) => {
          filter.forEach((obj, objIndex) => {
            if (item == obj.selectId) {
              subHospName.push(obj.selectName);
            }
          });
        });

        return subHospName.join('、');
      },
      initMyChart () {
        this.threeAreaChart = this.$echarts.init(document.getElementById('three-area-chart-id'));
        this.oneAreaChart = this.$echarts.init(document.getElementById('one-area-chart-id'));
        this.barChart = this.$echarts.init(document.getElementById('bar-chart-id'));
        this.pieChart = this.$echarts.init(document.getElementById('pie-chart-id'));
      },
      resizeMyChart () {
        this.threeAreaChart.resize();
        this.barChart.resize();
        this.pieChart.resize();
        this.oneAreaChart.resize();
      },
      clearMyChart () {
        this.threeAreaChart.clear();
        this.barChart.clear();
        this.pieChart.clear();
        this.oneAreaChart.clear();
      },
      loadingMyChart (val) {
        if (val) {
          this.threeAreaChart.showLoading(loadingOpt);
          this.barChart.showLoading(loadingOpt);
          this.pieChart.showLoading(loadingOpt);
          this.oneAreaChart.showLoading(loadingOpt);
        } else {
          this.threeAreaChart.hideLoading();
          this.barChart.hideLoading();
          this.pieChart.hideLoading();
          this.oneAreaChart.hideLoading();
        }
      },

      // 三个面积去
      setThreeAreaChartData (data) {
        let json = {};
        json.legend = ['全部就诊人员', '男性就诊人员', '女性就诊人员'];
        json.XAxis = data.allAgeList;
        json.allNumber = data.allNumList;
        json.manNumber = data.nanNumList;
        json.womanNumber = data.nvNumList;

        // 显示
        json.allTitle = data.allMeasureList;
        json.manTitle = data.nanMeasureList;
        json.womanTitle = data.nvMeasureList;

        this.drawThreeAreaChart(json);
      },
      drawThreeAreaChart (json) {

        let showFormatter = function (params) {
          return `<sapn style="color: #fff">就诊人数</sapn></br>
                          <span style="color: #fff">年龄: ${params[0].name}岁</span></br>
                          <span style="color: #fff">全部就诊人员: ${json.allTitle[params[0].dataIndex]}</span></br>
                          <span style="color: #fff">男性就诊人员: ${json.manTitle[params[0].dataIndex]}</span></br>
                          <span style='color:#fff'>女性就诊人员: ${json.womanTitle[params[0].dataIndex]}</span>`
        };
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line',
              label: {
                backgroundColor: '#6a7985'
              }
            },
            show: true,
            textStyle: {
              fontSize: 12
            },
            formatter: showFormatter,
          },
          legend: {
            data: json.legend,
            textStyle: {
              color: '#fff',
            }
          },
          grid: {
            top: '2%',
            left: '10%',
            height: '70%',
            width: '70%',
          },
          xAxis: [
            {
              name: '单位 : 岁',
              nameTextStyle: {
                color: '#fff',
              },
              type: 'category',
              boundaryGap: false,
              data: json.XAxis,
              axisTick: {
                show: false
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#2a4565'
                }
              },
              axisLabel: {
                formatter: '{value}',
                textStyle: {
                  color: '#fff'
                }
              },
            }
          ],
          yAxis: [
            {
              splitNumber: 7,
              axisPointer: {
                label: {
                  precision: 0
                }
              },
              name: '人数',
              nameTextStyle: {
                color: '#fff',
              },
              type: 'value',
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#2a4565'
                }
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#2a4565'
                }
              },
              axisLabel: {
                formatter: '{value}',
                textStyle: {
                  color: '#fff'
                }
              },
              splitLine: {
                show: false
              }
            }
          ],
          series: [
            {
              name: json.legend[0],
              type: 'line',
              color: 'rgba(41, 176, 158, 0.4)',
              smooth: true,
              symbol: 'none',
              itemStyle: {
                normal: {
                  areaStyle: {
                    type: 'default'
                  },
                },
              },
              data: json.allNumber,
            },
            {
              name: json.legend[1],
              type: 'line',
              color: 'rgba(50, 129, 253, 0.4)',
              smooth: true,
              symbol: 'none',
              itemStyle: {
                normal: {
                  areaStyle: {
                    type: 'default'
                  }
                }
              },
              data: json.manNumber,
            },
            {
              name: json.legend[2],
              type: 'line',
              color: 'rgba(255, 106, 147, 0.4)',
              smooth: true,
              symbol: 'none',
              itemStyle: {
                normal: {
                  areaStyle: {
                    type: 'default'
                  }
                }
              },
              data: json.womanNumber,
            },
          ]
        };
        this.threeAreaChart.setOption(option);
      },

      // 一个面积去
      setOneAreaChartData (data) {
        let json = {};
        json.legend = ['就诊人数'];
        json.XAxis = data.xList;
        json.allNumber = data.numList;
        json.showDate = data.nameList;

        // 显示
        json.allTitle = data.measureList;

        this.drawOneAreaChart(json);
      },
      drawOneAreaChart (json) {
        let showFormatter = function (params) {
          return `<sapn style="color: #fff">就诊人数</sapn></br>
                          <span style="color: #fff">就诊时间: ${json.showDate[params[0].dataIndex]}</span></br>
                          <span style="color: #fff">人数: ${json.allTitle[params[0].dataIndex]}</span>`
        };
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line',
              label: {
                backgroundColor: '#6a7985'
              }
            },
            show: true,
            textStyle: {
              fontSize: 12
            },
            formatter: showFormatter,
          },
          legend: {
            data: json.legend,
            textStyle: {
              color: '#fff',
            }
          },
          grid: {
            top: '2%',
            left: '10%',
            height: '70%',
            width: '70%',
          },
          xAxis: [
            {
              name: '就诊时间',
              nameTextStyle: {
                color: '#fff',
              },
              type: 'category',
              boundaryGap: false,
              data: json.XAxis,
              axisTick: {
                show: false
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#2a4565'
                }
              },
              axisLabel: {
                formatter: '{value}',
                textStyle: {
                  color: '#fff'
                }
              },
            }
          ],
          yAxis: [
            {
              splitNumber: 7,
              axisPointer: {
                label: {
                  precision: 0
                }
              },
              name: '人数',
              nameTextStyle: {
                color: '#fff',
              },
              type: 'value',
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#2a4565'
                }
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#2a4565'
                }
              },
              axisLabel: {
                formatter: '{value}',
                textStyle: {
                  color: '#fff'
                }
              },
              splitLine: {
                show: false
              }
            }
          ],
          series: [
            {
              name: json.legend[0],
              type: 'line',
              color: 'rgba(41, 176, 158, 0.4)',
              smooth: true,
              symbol: 'none',
              itemStyle: {
                normal: {
                  areaStyle: {
                    type: 'default'
                  },
                },
              },
              data: json.allNumber,
            }
          ]
        };
        this.oneAreaChart.setOption(option);
      },

      // 柱状图
      setBarChartData (data) {
        let json = {};

        json.yAxis = data.nameArray;
        json.number = data.numRealArray;
        json.tipNumber = data.measureArray;
        json.tipNumberRatio = data.rateArray;
        this.drawBarChart(json);
      },
      drawBarChart (json) {
        let that = this;
        let option = {
          tooltip: {
            formatter: function (params) {
              let i = params.dataIndex;
              let txt = `<p style="color: #fff; font-size: 12px">就诊人数</p>
                         <p style="color: #fff; font-size: 12px">单位类型: ${json.yAxis[i]}</p>
                         <p style="color: #fff; font-size: 12px">人数: ${json.tipNumber[i]}</p>
                         <p style="color: #fff; font-size: 12px">占比: ${json.tipNumberRatio[i]}%</p>
              `;
              return txt;
            }
          },
          grid: {
            left: '25%',
            height: '70%',
            width: '60%',
            top: '10%'
          },
          xAxis: {
            splitLine: {show: false},
            axisLine: {show: false},
            axisLabel: {show: false,},
            axisTick: {show: false}
          },
          yAxis: {
            data: json.yAxis,
            inverse: true,
            axisLine: { //y轴的横线是否显示
              show: false,
            },
            axisTick: { //y轴的刻度短竖线是否显示
              show: false
            },
            axisLabel: {
              formatter: function (value) {
                let img = that.defaultUnit[value];
                if (img) {
                  return `{a|${value}}{${img}|}`
                } else {
                  return `{a|${value}}`
                }
              },
              textStyle: {
                color: '#fff'
              },
              rich: {
                a: {
                  padding: [0, 10, 0, 0]
                },
                other: {
                  backgroundColor: {
                    image: that.other
                  },
                  height: 20
                },
                job: {
                  backgroundColor: {
                    image: that.job
                  },
                  height: 20
                },
                career: {
                  backgroundColor: {
                    image: that.career
                  },
                  height: 20
                },
                company: {
                  backgroundColor: {
                    image: that.company
                  },
                  height: 20
                },
              }
            }
          },
          series: [{
            type: 'bar',
            showSymbol: false,
            barGap: 0,
            itemStyle: {
              color: '#29b69d',
              borderWidth: 0
            },
            data: json.number,
            label: {
              show: true,
              position: 'right',
              formatter: function (params) {
                let i = params.dataIndex;
                return `${json.tipNumber[i]}`
              },
              color: '#fff'
            },
            barWidth: '40%',
            barMaxWidth: '40%',
          }]
        };
        this.barChart.setOption(option);
      },
      // 饼形图
      setPieChartData (data, allNums) {
        let json = {};
        let obj = [];
        for (let i = 0; i < data.length; i++) {
          let item = data[i];
          let sexObj = {};
          sexObj.value = item.sexNum;
          sexObj.name = item.sexName == '空白' ? '' : (item.sexName + item.sexRate + '%');
          sexObj.number = item.measure;
          sexObj.numberRatio = item.sexRate;
          if (i < 3) {
            obj.push(sexObj);
          } else if (i == 3 && sexObj.value > 0) {
            obj.push(sexObj);
          }
        }

        json.pieObj = obj;
        json.allNumber = allNums;

        this.drawPieChart(json);
      },
      drawPieChart (json) {
        let option = {
          tooltip: {
            trigger: 'item',
            formatter: function (params) {

              if (params.name == '') {
                return ''
              }

              return `<span style="color: #fff; font-size: 12px">就诊人数</span></br>
                      <span style="color: #fff; font-size: 12px">性别: ${params.name.substr(0,2)}</span></br>
                      <span style="color: #fff; font-size: 12px">人数: ${params.data.number}</span></br>
                      <span style="color: #fff; font-size: 12px">占比: ${params.data.numberRatio}%</span>`;
            }
          },
          legend: {
            orient: 'vertical',
            x: '70%',
            y: '30%',
            icon: 'rect',
            itemWidth: 10,
            itemHeight: 10,
            itemGap: 20,
            selectedMode: false,
            textStyle: {
              color: '#fff',
            },
          },
          series: [
            {
              minAngle: 5,
              type: 'pie',
              radius: ['40%', '60%'],
              center: ['40%', '40%'],
              avoidLabelOverlap: false,
              hoverAnimation: false,
              animation: false,
              label: {
                show: true,
                position: 'center',
                rich: {
                  textAlign: 'center',
                  a: {
                    color: '#29b69d',
                    fontSize: 18,
                    lineHeight: 24,
                    textAlign: 'right',
                    fontWeight: 'bolder ',
                  },
                  b: {
                    color: '#29b69d',
                    fontSize: 12,
                    fontWeight: 'bolder ',
                  }
                },
                formatter: function (params) {
                  if (params.dataIndex == json.pieObj.length - 1) {
                    return `{a|${json.allNumber}}\n{b|就诊人数}`
                  } else {
                    return ''
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              itemStyle: {
                color: function (params) {
                  let colorList = ['#3281fd', '#ff6a93', '#8a8a8a', '#ccc'];
                  return colorList[params.dataIndex]
                }
              },
              data: json.pieObj
            }
          ]
        };

        this.pieChart.setOption(option);
      },

      // 获取数据
      getData () {

        this.loadingMyChart(true);

        // 真实数据
        let startTime = '';
        let endTime = '';
        if (this.radioVal == 1) {
          if (this.startMonthDate) {
            startTime = this.dateFormat(this.startMonthDate, 'MM');
          }

          if (this.endMonthDate) {
            endTime = this.dateFormat(this.endMonthDate, 'MM');
          }
        } else if (this.radioVal == 2) {
          if (this.startDate) {
            startTime = this.dateFormat(this.startDate, 'MMdd');
          }

          if (this.endDate) {
            endTime = this.dateFormat(this.endDate, 'MMdd');
          }
        }

        getQuerySingleJiuZhenDetail('report/querySingleJiuZhenDetail',
          this.propParams.year, this.radioVal, this.propParams.areaCode,
          this.propParams.hospitalLevel, this.propParams.hospCode, this.sex,
          this.startAge, this.endAge, startTime,
          endTime, this.propParams.medicalTypeCode, this.propParams.disId)
          .then(response => {
            if (response.code == 0) {

              this.loadingMyChart(false);
              this.isShowChart = true;

              this.setThreeAreaChartData(response.data.ageMap);
              this.setOneAreaChartData(response.data.timeMap);
              this.setBarChartData(response.data.compTypeMap);
              this.setPieChartData(response.data.sexList, response.data.allNums);

            } else {
              this.isShowChart = false;
              return;
            }

            this.bulkMap = response.data.bulkMap;
          });
      },
      // 改变时间段
      changeDateRequest () {

        this.oneAreaChart.showLoading(loadingOpt);
        // 真实数据
        let startTime = '';
        let endTime = '';
        if (this.radioVal == 1) {
          if (this.startMonthDate) {
            startTime = this.dateFormat(this.startMonthDate, 'MM');
          }

          if (this.endMonthDate) {
            endTime = this.dateFormat(this.endMonthDate, 'MM');
          }
        } else if (this.radioVal == 2) {
          if (this.startDate) {
            startTime = this.dateFormat(this.startDate, 'MMdd');
          }

          if (this.endDate) {
            endTime = this.dateFormat(this.endDate, 'MMdd');
          }
        }

        getQueryJiuZhenDetail('report/queryJiuZhenTimeDetail', this.propParams.year, this.radioVal, this.propParams.areaCode,
          this.propParams.hospitalLevel, this.propParams.hospCode, this.sex, this.startAge, this.endAge, startTime,
          endTime, this.compType, this.medicalTypeCode)
          .then(response => {
            if (response.code == 0) {

              this.oneAreaChart.hideLoading();
              this.isShowOneAreaChart = true;

              this.setOneAreaChartData(response.data.timeMap);

            } else {
              this.isShowOneAreaChart = false;
              return;
            }
          });
      },

      // 设置高度
      getContentH () {
        let height = document.querySelector('body').clientHeight;
        let bodyWidth = document.querySelector('body').clientWidth;

        let top = 0;
        let barHeight = 0;
        let titleHeight = 44;
        let marginHeight = 40;


        let sideWidth = 0;

        // 全屏的时候没有
        if (document.querySelector('.el-header')) {
          top = 70;
          barHeight = document.querySelector('.el-header').clientHeight;
        }

        // 左边的全屏也没有
        if (document.querySelector('.el-aside')) {
          sideWidth = document.querySelector('.el-aside').clientWidth;
          this.leftAnimate = 'open-left-menu'
        } else {
          this.leftAnimate = 'close-left-menu'
        }

        this.top = top;
        this.navWidth = bodyWidth - sideWidth;
        this.height = height - barHeight - titleHeight - marginHeight - 6;
      },
      goBack () {
        sessionStorage.setItem('isPrev','3')
        this.$router.go(-1);
      },
      // 字数太长省略
      filterLogText (value, leng = 7) {
        if (value.length <= leng) {
          return value;
        } else {
          return value.slice(0, leng) + '...';
        }
      },
      mouseenter () {
        this.showFloating = true;
      },
      mouseleave () {
        this.showFloating = false;
      },
      initScreenObj () {
        var emplState = [
          {
            "selectId": "",
            "selectName": "全部就业状态"
          },
          {
            "selectId": "01",
            "selectName": "在业"
          },
          {
            "selectId": "03",
            "selectName": "退休"
          },
          {
            "selectId": "02",
            "selectName": "离休"
          },
          {
            "selectId": "04",
            "selectName": "退职"
          },
          {
            "selectId": "05",
            "selectName": "失业"
          },
          {
            "selectId": "07",
            "selectName": "从未就业"
          },
          {
            "selectId": "08",
            "selectName": "其它"
          }
        ];
        this.screenObj = {
          "compType": [
            {
              "selectId": "",
              "selectName": "全部单位"
            },
            {
              "selectId": "1",
              "selectName": "企业"
            },
            {
              "selectId": "2",
              "selectName": "事业单位"
            },
            {
              "selectId": "3",
              "selectName": "灵活就业"
            },
            {
              "selectId": "9",
              "selectName": "其它"
            }
          ],

          "emplState": emplState,
          "sex": [
            {
              "selectId": "",
              "selectName": "全部性别"
            },
            {
              "selectId": "1",
              "selectName": "男"
            },
            {
              "selectId": "2",
              "selectName": "女"
            },
            {
              "selectId": "3",
              "selectName": "未知"
            }
          ],
          "medical": [
            {
              "selectId": "",
              "selectName": "全部医疗类型"
            },
            {
              "selectId": "21,24",
              "selectName": "住院"
            },
            {
              "selectId": "15",
              "selectName": "门慢"
            },
            {
              "selectId": "11",
              "selectName": "普门"
            },
            {
              "selectId": "26",
              "selectName": "转院"
            },
            {
              "selectId": "9",
              "selectName": "其它"
            }
          ],
        }
      },
    },
  }
</script>

<style scoped>

  /* css 引用 */
  @import '../../../assets/css/decision.css';
  /* 必须在decision 下*/
  @import '../../../assets/css/portrait-personk-detail.css';

  .chart-container {
    position: relative;
  }

  .chart-radio {
    position: absolute;
    color: #fff;
    width: 200px;
    height: 30px;
    line-height: 30px;
    float: right;
    top: 10px;
    left: 35%;
  }

  .chart-radio > ul > li {
    display: inline-block;
    margin-left: 10px;
    font-size: 12px;
    height: 20px;
    line-height: 20px;
  }

  .chart-type1-layout {
    top: 10%;
    height: 85%;
  }

  .nav-top {
    z-index: 100;
  }

  .detail-top-layout {
    z-index: 100;
  }

  .second-search-box {
    z-index: 200;
  }

  /* 页面布局 */
  .small-content {
    position: relative;
    width: 100%;
    z-index: 1;
    overflow: auto;
    height: 880px;
  }

  .content-head-small-height {
    height: 100px;
  }

  .content-four-chart-max-height {
    height: 700px;
  }

  .bottom-line {
    border: 0;
    border-bottom: 1px solid #1d2027;
  }


  /* 日历相关 */
  .el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: 180px;
  }

</style>

